/*
    加check-group后样式冲突的问题
*/
$border_color: #fff;
$date_num_color: #808695;
$shift_color: #ff9900;
$group_color: #2b85e4;
.el-checkbox-group {
    font-size: 1px;
}

.schedule-container {
    .date-nav {
	    width: 100%;
	    font-weight: bold;
	    border-radius: 8px 8px 0 0;
	    display: flex;
	    align-items: flex-end;
	    justify-content: space-between;
	    margin: 8px 0;
	  .legend-bar {
		  display: flex;
		  align-items: center;
		  .legend-item {
			  display: flex;
			  align-items: center;
			  font-size: 12px;
			  font-weight: 500;
			  margin-left: 8px;
			  color: #808695;
			  .legend-icon {
				  width: 10px;
				  height: 10px;
				  margin-right: 4px;
			  }
		  }
	  }
	.month-title {
	    width: 260px;
	    border: solid 1px #2b85e4;
	    padding: 4px;
	    font-size: 34px;
		letter-spacing: 1px;
		font-weight: 500;
		color: #2b85e4;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		border-radius: 4px;
		margin: 0 10px;
		box-sizing: border-box;
		.el-icon-date {
			font-size: 28px;
			margin-right: 2px;
		}
	}
	.month-title:hover {
		color: #2d8cf0;
		cursor: pointer;
	}
    .current-month {
    }

  }

  .week-header-container {
    width: 100%;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
	  border-bottom: none;
	  color: black;
	  .week-header {
      width: calc(100% / 7);
      height: 40px;
      display: inline-block;
		  background: #e8eaec;
      line-height: 40px;
      text-align: center;
      box-sizing: border-box;
    }
  }
  .week-header-container .week-header:last-child {
    border-right: none;
  }

  .date-container {
    max-height: calc(100vh - 230px);
    overflow: auto;
	  border-bottom: none;
    box-sizing: border-box;
    scrollbar-width: none!important;
    border-radius: 0 0 6px 6px;
    .date-body {
      width: 100%;
      display: flex;
	    .date-body-item::-webkit-scrollbar{
		    width: 1px;
		    scrollbar-width: none!important;
	    }
	    .date-body-item::-webkit-scrollbar-thumb{
		    overflow:hidden;
		    scrollbar-width: none!important;
	    }
	    .date-body-item::-webkit-scrollbar-track{
		    overflow:hidden;
		    scrollbar-width: none!important;
	    }
      .date-body-item {
        width: calc(100% / 7);
        height: 122px;
	      overflow: auto;
        //display: table;
        font-size: 14px;
        padding: 4px 2px 4px 2px;
        color: #ccc;
        text-align: center;
        border-bottom: 4px solid $border_color;
        border-right: 4px solid $border_color;
        position: relative;
	      background: #f6f7f6;
	      box-sizing: border-box;
        //font-family: Serif;
        .check-box-position {
          position: absolute;
          left: 6px;
          top: 4px;
        }
        .date-item-num {
          line-height: 32px;
          position: absolute;
          top: 0;
          right: 4px;
          font-size: 24px;
	        font-family: Serif;
	        color: $date_num_color;
          z-index: 1;
	        font-weight: 100;
        }
        .date-item-schedule {
          width: 100%;
          font-size: 12px;
          line-height: 16px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          z-index: 2;
          .schedule-circle-icon {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: $shift_color;
          }
          .calendar-shift-type {
            font-size: 14px;
            width: 100%;
            margin-bottom: 4px;
            margin-top: 10px;
	          color: #515a6e;
	          font-weight: 300;
          }
          .group-bar {
            width: 100%;
            display: flex;
            margin-top: 4px;
            align-items: center;
            flex-wrap: wrap;
            border-radius: 4px;
            padding: 2px 2px 2px 4px;
            .shift-item-name {
              margin-left: 2px;
              text-align: left;
              white-space: nowrap;
              color: $shift_color;
            }

            .group-bar-item {
              margin-right: 6px;
              .group-item {
	              color: #515a6e;
	              white-space: nowrap;
                margin-left: 4px;
              }
	            .group-item:hover {
		            color: $group_color;
		            cursor: pointer;
	            }
            }
          }
        }
        .date-item-schedule-null {
          width: 90%;
          height: 24px;
          font-size: 16px;
	        font-weight: 100;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #c5c8ce;
	        //background: #e8f4ff;
	        cursor: pointer;
          position: absolute;
          top: 50%;
          margin-top: -12px;
        }
      }
      .date-body-item:hover {
        background: #e8f4ff;
        transition: .2s;
        .date-item-num-hover {
	        font-weight: 700!important;
	        color: #17233d;
        }
        .calendar-shift-type {
            //color: #fff;
	        font-weight: 500;
        }
	      .group-bar {
		      background: #fff;
	      }
      }
	    .date-item-has {
		    //color: #f8f8f9!important;
	    }
    }
    .date-body .date-body-item:last-child {
      border-right: none;
    }
  }
  .date-container::-webkit-scrollbar{
    overflow: hidden;
    scrollbar-width: none!important;
    width: 0!important;
    height: 0;
  }
}





